<template>
  <a-drawer
    class="organization-area-drawer-wrapper"
    width="800"
    :title="mode === 'add' ? '新增' : '编辑'"
    :visible="visible"
    :maskClosable="mode === 'read'"
    :destroyOnClose="true"
    @close="onCancel"
  >
    <div class="container">
      <div v-if="mode === 'read'">
        <h3 class="title">基本信息</h3>
        <div class="group">
          <div class="item left">
            <h3 class="name">姓名</h3>
            <p class="text">{{ form.username }}</p>
          </div>
          <div class="item">
            <h3 class="name">性别</h3>
            <p class="text">{{ form.gender }}</p>
          </div>
        </div>
        <div class="group">
          <div class="item left">
            <h3 class="name">手机号码</h3>
            <p class="text">{{ form.phone }}</p>
          </div>
          <div class="item">
            <h3 class="name">邮箱</h3>
            <p class="text">{{ form.email }}</p>
          </div>
        </div>
        <div class="group">
          <div class="item left">
            <h3 class="name">部门</h3>
            <p class="text">{{ form.orgId }}</p>
          </div>
          <div class="item">
            <h3 class="name">角色</h3>
            <p class="text">{{ form.role }}</p>
          </div>
        </div>
        <h3 class="title">其它信息</h3>
        <div class="group">
          <div class="item left">
            <h3 class="name">工号</h3>
            <p class="text">{{ form.empno }}</p>
          </div>
          <div class="item">
            <h3 class="name">职位</h3>
            <p class="text">{{ form.jobTitle }}</p>
          </div>
        </div>
        <div class="group">
          <div class="item left">
            <h3 class="name">入职日期</h3>
            <p class="text">{{ form.hiredate }}</p>
          </div>
          <div class="item"></div>
        </div>
      </div>
      <a-form v-else layout="vertical">
        <h3 class="title">基本信息</h3>
        <div class="group">
          <div class="left">
            <a-form-item label="姓名" v-bind="validateInfos.username">
              <a-input v-model:value="form.username" placeholder="请输入" />
            </a-form-item>
          </div>
          <div class="right">
            <a-form-item label="性别" v-bind="validateInfos.gender">
              <a-radio-group v-model:value="form.gender">
                <a-radio :value="1">男</a-radio>
                <a-radio :value="2">女</a-radio>
              </a-radio-group>
            </a-form-item>
          </div>
        </div>
        <div class="group">
          <div class="left">
            <a-form-item label="手机号码" v-bind="validateInfos.phone">
              <a-input v-model:value="form.phone" placeholder="请输入" />
            </a-form-item>
          </div>
          <div class="right">
            <a-form-item label="邮箱" v-bind="validateInfos.email">
              <a-input v-model:value="form.email" placeholder="请输入" />
            </a-form-item>
          </div>
        </div>
        <div class="group">
          <div class="left">
            <a-form-item label="部门" v-bind="validateInfos.orgId">
              <DeptTreeSelect v-model:selectValue="form.orgId" />
            </a-form-item>
          </div>
          <div class="right">
            <a-form-item label="角色" v-bind="validateInfos.role">
              <a-select
                v-model:value="form.role"
                :options="RoleOption"
                placeholder="请选择"
              />
            </a-form-item>
          </div>
        </div>
        <h3 class="title">其它信息</h3>
        <div class="group">
          <div class="left">
            <a-form-item label="工号" v-bind="validateInfos.empno">
              <a-input v-model:value="form.empno" placeholder="请输入" />
            </a-form-item>
          </div>
          <div class="right">
            <a-form-item label="职位" v-bind="validateInfos.jobTitle">
              <a-input v-model:value="form.jobTitle" placeholder="请输入" />
            </a-form-item>
          </div>
        </div>
        <div class="group">
          <div class="left">
            <a-form-item label="入职日期" v-bind="validateInfos.hiredate">
              <a-input v-model:value="form.hiredate" placeholder="请选择" />
            </a-form-item>
          </div>
          <div class="right"></div>
        </div>
      </a-form>
    </div>
    <template v-if="mode !== 'read'" #footer>
      <a-space :size="8">
        <a-button @click="onCancel">取消</a-button>
        <a-button type="primary" @click="onSave">提交</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts">
import { defineComponent, computed, reactive, ref, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { message, Form } from 'ant-design-vue';
import cloneDeep from 'lodash/cloneDeep';
import { ResponseHandle, GetPopupContainer } from '@/global/util/preUtils';
import { RoleOption } from '@/views/organization/constant';
import DeptTreeSelect from '@/components/common/DeptTreeSelect.vue';

const useForm = Form.useForm;
const template = {
  username: '',
  gender: 1,
  phone: '',
  email: '',
  orgId: undefined,
  role: 'normal',
  empno: '',
  jobTitle: '',
  hiredate: undefined,
};

export default defineComponent({
  name: 'OrgDrawer',
  components: {
    DeptTreeSelect,
  },
  props: {
    visible: {
      type: Boolean,
      default: () => false,
    },
    mode: {
      type: String,
      default: () => '',
    },
    curBizObject: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(prop, context) {
    const store = useStore();
    const form = reactive(cloneDeep(template));
    const formRule = reactive({
      username: [{ required: true, trigger: 'change', message: '请输入姓名' }],
      phone: [{ required: true, trigger: 'change', message: '请输入手机号码' }],
      orgId: [{ required: true, trigger: 'change', message: '请选择部门' }],
      empno: [{ required: true, trigger: 'change', message: '请输入工号' }],
    });
    const { validate, validateInfos, clearValidate } = useForm(form, formRule);
    watchEffect(async () => {
      if (['edit', 'read'].includes(prop.mode)) {
        Object.assign(form, { ...prop.curBizObject });
      } else {
        Object.assign(form, cloneDeep(template));
        setTimeout(() => {
          // 改变表单值会触发校验，下次打开时会显示校验结果，需清除校验
          clearValidate();
        }, 0);
      }
    });
    const onSave = async (type: string) => {
      validate().then(async () => {
        const apiPath = `organization/${
          prop.mode === 'edit' ? 'save' : 'create'
        }User`;
        const res = await store.dispatch(apiPath, form);
        ResponseHandle(res, () => {
          message.success('保存成功');
          context.emit('onClose');
          context.emit('onRefresh');
        });
      });
    };
    const onCancel = () => {
      context.emit('onClose');
    };

    return {
      GetPopupContainer,
      RoleOption,
      form,
      validateInfos,
      onSave,
      onCancel,
    };
  },
});
</script>

<style lang="less">
.organization-area-drawer-wrapper {
  .ant-drawer-content-wrapper {
    .ant-drawer-content {
      .ant-drawer-wrapper-body {
        .ant-drawer-header {
          padding: 17px 24px;
          border-bottom: none;
          background-color: @rb-background-color;
          .ant-drawer-header-title {
            .ant-drawer-title {
              font-weight: 600;
            }
          }
        }
        .ant-drawer-body {
          padding: 4px 16px;
          .container {
            height: 100%;
            padding: 12px;
            background-color: @rb-body-background;
            .title {
              display: flex;
              align-items: center;
              font-size: 14px;
              font-weight: 600;
              height: 22px;
              line-height: 22px;
              margin-bottom: 8px;
              &:before {
                content: '';
                display: inline-block;
                width: 4px;
                height: 16px;
                background: @rb-primary-color;
                border-radius: 2px;
                margin-right: 12px;
              }
            }
            .group {
              .flexRow(flex-start, flex-start);
              .ant-select-selector {
                border-radius: 4px;
              }
              .ant-input {
                border-radius: 4px;
              }
              .left,
              .right {
                width: 50%;
              }
              .left {
                margin-right: 24px;
              }
              .item {
                width: 50%;
                margin-bottom: 24px;
                .name {
                  margin-bottom: 4px;
                  font-size: 12px;
                  font-weight: bold;
                }
                .text {
                  padding: 0 12px;
                  line-height: 32px;
                  min-height: 32px;
                  border-radius: 4px;
                  background-color: @rb-background-color;
                }
              }
            }
          }
        }
        .ant-drawer-footer {
          text-align: right;
        }
      }
    }
  }
}
</style>
<style lang="less" scoped></style>
